<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8">
	<meta name="keywords" content="关键字台">
    <meta name="description" content="描述"> 
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"> 
	<link href="${ctx}/css/plugins/toastr/toastr.min.css" rel="stylesheet" >
	<title>红包配置管理</title>
<!-- Web Uploader -->

</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
           <div class="col-sm-12">
           		<div class="ibox float-e-margins">
           			<div class="ibox-title">
                        <div class="row">
                           <div class="col-sm-12">
                                <h3>红包配置管理</h3>
                           </div>
                        </div>
                      </div>
                   

          
	         <div class="ibox-content">
				<form class="form-horizontal" action="${ctx}/hb/saveHb"
					name="hbInitform" id="hbInitform" method="post">
					
					<c:forEach var="hb" items="${hbList }" varStatus="status">
						<c:if test="${status.index == 0 }">
							<div class="form-group" >
								<label class="col-sm-3 control-label">红包金额(元)：</label>
								<div class="col-sm-2">
								<input type="text" class="form-control" name="money" maxlength="10"
										id="money" value='${hb.money/100 }' />
									<input type="hidden" name="id"  value="${hb.id}" placeholder="请输入红包金额"/> 
								</div>
								<label class="col-sm-2 control-label">兑换积分：</label>
								<div class="col-sm-2">							
										<input type="text" class="form-control" name="cost" placeholder="请输入兑换积分" maxlength="8"
											id="cost" value="${hb.cost}"/>
								</div>
								<button type="button" class="btn btn-primary  btn-xs" onclick="addCol()">添加红包配置</button>
							</div>						
						</c:if>
						<c:if test="${status.index != 0 }">
							<div class="form-group" >
								<label class="col-sm-3 control-label">红包金额(元)：</label>
								<div class="col-sm-2">
								<input type="text" class="form-control" name="money"
										id="money" value='${hb.money/100 }' placeholder="请输入红包金额" maxlength="10"/>
									<input type="hidden" name="id"  value="${hb.id}"/> 
								</div>
								<label class="col-sm-2 control-label">兑换积分：</label>
								<div class="col-sm-2">							
										<input type="text" class="form-control" name="cost" placeholder="请输入兑换积分" maxlength="8"
											id="cost" value="${hb.cost}"/>
								</div>
								<button type="button" class="btn btn-danger btn-xs" onclick="delCol(this);return false;">删除</button>
							</div>						
						</c:if>
					</c:forEach>
					
					<div class="form-group">
						<label class="col-sm-5 control-label"></label>
						<div class="col-sm-6">
							<button class="btn btn-large btn-primary"  id="saveBtn" name="saveBtn"  onclick="save();return false;">&#8194;保存&#8194;</button>
						</div>
					</div>
					
				</form>
			</div>
		
		 </div>
	</div>
	</div>
	</div>
	
	
	 <!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="${ctx}/js/content.js?v=1.0.0"></script>
	<script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx}/js/common.js"></script>
    <script src="${ctx}/js/plugins/toastr/toastr.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/jquery.validate.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#hbInitform").validate({
		debug : false,
		rules : {
			money : {
				required : true,
				number:true,
				min : 1,
				max : 4999,
				towDot :true
			},
			cost : {
				required : true,
				digits:true,
				minlength : 1,
				maxlength : 8
			}
		},
		messages : {
			money : {
				required : "请输入红包金额",
				number: "红包金额为数字",
				min: "金额不能小于1",
				max: "金额最多为4999",
				towDot :"红包金额只能输入两位小数",
			},
			cost : {
				required : "请输入兑换积分数",
				digits: "积分必须输入正整数",
				minlength: "积分数不能小于0",
				maxlength: "积分数最多为8位"
			}
		}
	});
	
	//定义只能输入两位小数的validate验证
	jQuery.validator.addMethod("towDot", function(value, element) {
		var bool = true;
		if (!isNaN(value)) {
			var dot = value.indexOf(".");
			if (dot != -1) {
				var dotCnt = value.substring(dot + 1, value.length);
				if (dotCnt.length > 2) {
					bool = false;
				}
			}
		}
		return bool;
	}, "只能输入两位小数");
});
    
    function save(){
    	toastr.options = {
    			  "closeButton": false,
    			  "debug": false,
    			  "progressBar": false,
    			  "positionClass": "toast-top-center",
    			  "onclick": null,
    			  "showDuration": "400",
    			  "hideDuration": "1000",
    			  "timeOut": "2000",
    			  "extendedTimeOut": "1000",
    			  "showEasing": "swing",
    			  "hideEasing": "linear",
    			  "showMethod": "fadeIn",
    			  "hideMethod": "fadeOut"
    			}
		if (!$("#hbInitform").valid()){
			return;
		}else{
	    	//表单验证
	    	 if(!checkInput()){
	   		  return; 
	   	   }
    		$.ajax({
    			type : "POST",
    			url : "saveHb", //换成你要请求的action, paperId 是url参数
    			data : $("#hbInitform").serialize(),
    			dataType:"json",
    			error : function(data) {
    				toastr.error(data.message);
    			},
    			success : function(data) {
    				if(data.state == 1){
    					toastr.success(data.message);
    				}else{
    					toastr.error(data.message);
    				}
    			}
    		});
		}
    }
    
  	//判断是否为浮点数
	function checkRate(str){
		var reg = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
		return reg.test(str);
	}
    
    function checkInput(){
    	var length = $("#hbInitform input[name='money']").length;
    	for(var i=0;i<length;i++){
    		var money=$("#hbInitform input[name='money']")[i].value;
    		var cost=$("#hbInitform input[name='cost']")[i].value;
			if(checkIsEmpty(money)){
				layer.msg("红包金额不能为空");
				return false;
			}
			if((money*1)<1){
				layer.msg("红包金额大于等于1");
				return false;
			}
			if((money*1)>4999){
				layer.msg("红包金额小于等于4999");
				return false;
			}
			if(checkRate(money)){
				var list = money.split(".");
				if(list.length>1 && list[1].length > 2){
					layer.msg("红包金额只能输入两位小数");
					return false;
				}
			}
			if(checkIsEmpty(cost)){
				layer.msg("兑换积分不能为空");
				return false;
			}
			if(!checkNum(cost)){
				layer.msg("兑换积分为正整数");
				return false;
			}
    	}
    	return true;
    }
  //新增红包概率
    function addCol(){
    	if(!$("#hbInitform").valid()){
    		return ;
    	}
    	var length = $("#hbInitform input[name='money']").length;
 	   if(length >= 3){
 		   layer.msg("只能添加三组红包配置");
 		   return false;
 	   }
	   if(!checkInput()){
		  return; 
	   }
	   
    		
    	var str = ' <div class="form-group">\
    					<label class="col-sm-3 control-label">红包金额(元)：</label>\
    					<div class="col-sm-2">\
    						<input class="form-control" type="text" name="money" id="money" placeholder="请输入红包金额"/>\
    						<input type="hidden" name="id"  value="0"/>\
    					</div>\
    					<label class="col-sm-2 control-label">兑换积分：</label>\
    					<div class="col-sm-2">\
    						<input class="form-control" type="text" id="cost" name="cost" placeholder="请输入兑换积分"/>\
    					</div>\
    				<button type="button" onclick="delCol(this);return false;" class="btn btn-danger btn-xs">删除</button>\
    		</div>\ ';
    	$("#saveBtn").parent().parent().before(str);
    }

    //删除红包概率方法
    function delCol(nowTr) {
    	$(nowTr).parent().remove();
    } 
</script>
</body>
</html>